Postman challenge Day 26 - HTML解析 (Parse HTML response) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 27

Modern Web

[POSTMAN] 該知道的都知道，不知道的慢慢了解 - 與波斯麵三十天的感情培養系列第 27 篇

Postman challenge Day 26 - HTML解析 (Parse HTML response)

14th鐵人賽 postman api cheerio html

chacoteeth

團隊森上依然梅友前

2022-10-12 23:03:58

1016 瀏覽

分享至

今日主題

今天的主題是前面章節Using libraries的延伸應用，我們將會使用Postman來解析HTML的內容。在開始之前，記得先把Day 26: Parse HTML response複製到自己的工作區。

回到自己的工作區後，打開今天的資料夾Parse HTML response並根據以下步驟

新增請求
- 命名為 bing
- 方法為 GET
- URL https://www.bing.com/search?q=postman
  設定完後試著發送請求，可以透過bing搜尋引擎去找postman，並回傳HTML格式的結果

解析HTML
接下來需要找到所有搜尋結果的連結，收集起來儲存到一個陣列裡，所以先看一下內建函式庫cheerio的用法，也就是要用來解析HTML內容的函式庫，範例如下。可以看到只要用load將HTML載入，就能透過$搭配選擇器來取得相對應的元素進行操作

const cheerio = require('cheerio');
const $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>

接著觀察一下剛剛搜尋引擎回傳的HTML資料格式，觀察要取回連結需要如何操作

<li class="b_algo b_vtl_deeplinks">
  <h2><a href="https://www.postman.com/">Postman API Platform</a></h2>
                  ...
<li class="b_algo">
  <h2><a href="https://tw.alphacamp.co/blog/postman-api-tutorial-for-beginners">API測試工具 Postman 新手教學｜使用Postman 開發出你的第一支 …</a></h2>

接著Tests就能夠根據選擇器來把我們需要的所有連結取出，然後存放到陣列裡，最後把陣列轉成字串用collection變數進行保存

// 透過cheerio載入搜尋引擎傳回的HTML
const $ = cheerio.load(pm.response.text());

var links = [];
$("li.b_algo h2 a").each(function () {
  let href = $(this).attr("href"); 
  links.push(href)
});
//console.log(links)
pm.collectionVariables.set('links', JSON.stringify(links))

新增測試
簡單的加入兩個測項，分別基本測試200成功狀態碼，而另一個測試用來確認變數links的內容的確是一個陣列，由於前面我們轉成字串來儲存，這裡用JSON.parse進行還原

pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});

pm.test("Body is correct", function () {
    let links = JSON.parse(pm.collectionVariables.get("links"))
    pm.expect(links).to.be.an("array");
});